import React, { Component } from "react";

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      friends: [
        {
          name: "xjh",
          age: 19,
        },
        {
          name: "xjh2",
          age: 192,
        },
        {
          name: "xjh3",
          age: 9,
        },
      ],
    };
  }
  shouldComponentUpdate(newProps, newState) {
    if (newState.friends !== this.state.friends) {
      return true;
    }
    return false;
  }
  render() {
    return (
      <div>
        <h2>好友列表</h2>
        <ul>
          {this.state.friends.map((item, index) => {
            return <li key={index}>{item.name}</li>;
          })}
        </ul>
        <button
          onClick={(e) => {
            this.addClick();
          }}
        >
          add
        </button>
      </div>
    );
  }
  addClick = () => {
    const newFriends = [...this.state.friends];
    newFriends.push({
      name: "tom",
      age: 198,
    });
    this.setState({
      friends: newFriends,
    });
  };
}
